<template>
  <div class="juese3">
    <!-- <div class="jindu  animate__animated animate__fadeInDown">
      <el-steps :active="activeIndex">
        <el-step @click.native="maodian(index + 1)" v-for="(item, index) in list" :key="index" :title="item.name">
          <div slot="icon">
            <div class="icon"></div>
          </div>
        </el-step>
      </el-steps>
     
    </div> -->
    <daohang @handletab="maodian" :list="list"></daohang>

    <div class="jueseContent" ref="jueseContent">
      <div class="zhuli" ref="title1"  id="section1">
        <div class="startTitle  animate__animated animate__fadeInUp">
          智能助理
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in zuliList" :key="i" :class="'animate__animated animate__fadeInUp animate__delay-0' + i * 1 + 's'  ">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>



      <div class="zhuli" ref="title1"  id="section2">
        <div class="startTitle  animate__animated animate__fadeInUp">
          数据驾驶舱
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in jscList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>

      <div class="zhuli" ref="title1"  id="section3">
        <div class="startTitle  animate__animated animate__fadeInUp">
          常用功能
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in cygnList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1"  id="section4">
        <div class="startTitle  animate__animated animate__fadeInUp">
          行业资讯
        </div>
        <el-row :gutter="20">
          <el-col :span="8" :class="'animate__animated animate__fadeInUp'">
            <div class="item">
              <div class="content">
                实时推送旅游资讯及营销案例，帮助角色了解行业一手信息。提供旅游经典营销案例，帮助营销活动的经验采纳，与市场营销与时俱进
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeIndex:1,
      list: [
        {
          id: '1',
          name: "智能助理",
          active:true,
        },
        {
          id: '2',
          name: "数据驾驶舱",
          active: false,
        },
        {
          id: '4',
          name: "常用功能",
          active: false,
        },{
          id: '4',
          name: "行业资讯",
          active: false,
        },
      ],
      zuliList: [
        {
          name: '',
          content: '帮助营销角色实现由流程型向战略型转型，通过智能助理从自动化升级智能化管理。从营销策略的构建、执行、分析和优化各阶段一体化管控能力，提高营销效率和提升营销效果',
        }
      ],
      jscList: [
        {
          name: '',
          content: '营销活动效果实施跟踪，同时结合当前活动动态推送数据指标；全营销数据指标检测；汇总式数据诊断',
        },
        
      ],
      cygnList: [
        {
          name: '优惠券',
          content: '营销推广活动必备的神器，设置灵活、样式丰富，各业态可根据营销指标的经营策略，设置多样化的优惠券营销活动',
        },
        {
          name: '秒杀活动',
          content: '拉新促销，提升购买率的营销活动，各业态可结合活动前预热的措施拉新促活，引导客户在有限的时间内完成超低价的抢购。限时性更强，抢购氛围更浓，可营造出一种不是所有人都能抢到的刺激感',
        },
        {
          name: '砍价活动',
          content: '让利给出商品底价，同时设置活动时间、以及需砍次数。通过砍价，买家可以更优惠地购买商品；商家可以实现裂变传播',
        },{
          name: '分销管理',
          content: '使用分销功能，可以让更多的人来帮助推广并卖出产品，给予分销商一定的佣金，佣金比例以及网站由您管理掌控',
        },
      ],
    }
  },
  mounted() {
    ;
  },
  methods: {
    name() {

    },
    maodian(num) {
      
      var tar = document.getElementById('section'+num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
      this.$forceUpdate()
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
.juese3 {
  height: 100%;

  .jindu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    border: 0px solid #DDDDDD;

    .steps {
      justify-content: center;
    }

    .juli {
      margin-right: 253px;
    }

    .juli2 {
      margin-right: 211px;
    }
  }

  .jueseContent {
    // width: 100%;
    // padding-top: 20px;
    // overflow-y: auto;
    // // border: 1px solid red;
    // height: calc(100% - 88px);

    .startTitle {
      font-size: 20px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }

    .item {
      box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
      border-radius: 12px;
      background: #FFFFFF;
    }

    .zhuli {
      width: 100%;
      overflow: hidden;

      .item {
        padding: 32px;
        margin-bottom: 24px;
        background: url('~@/assets/images/mkBj.png') repeat;
        background-size: cover;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        transition: all 0.3s;
        &:hover{
          transform: translateY(-10px);
        }
        .title {
          font-size: 24px;
          font-weight: 600;
          color: #000000;
        }

        .content {
          margin: 21px 0 30px;
          font-size: 18px;
          font-weight: 400;
          color: #000000;
          display: -webkit-box;
          display: -moz-box;
          // white-space: pre-wrap;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
          -webkit-line-clamp: 3;
          /*显示行数  要几行就改几行*/
        }

        .anniu {
          text-align: center;
          line-height: 56px;
          height: 56px;
          cursor: pointer;
          border-radius: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #0661FB;
          background: #FFFFFF;
          border: 1px solid rgba(202, 202, 202, 0.67);
          transition: all 0.4s;
          &:hover {
            color: #FFFFFF;
            background: #0661FB;
            border: 1px solid #0661FB;
            box-shadow: 0px 0px 20px 0px rgba(6, 97, 251, 0.3);
          }
        }
      }
    }


  }


}
</style>